<template>
  <div>
    <div class="box" v-if="token !== ''">
      <div class="wapper" v-show="cartList.length > 0">
        <div class=" title">
          <label for="cherAll">
            <!-- @change="toggleAllCheck" -->
            <input type="checkbox" id="cherAll" v-model="isAllChecked" />全选</label>
        </div>
        <div class="name">商品名称</div>
        <div class="price">单价</div>
        <div class="nums">数量</div>
        <div class="total">小计</div>
        <div class="dels">操作</div>
      </div>
      <!-- 商品 -->
      <div class="goods" v-if="cartList.length > 0">
        <div class="slgle-good" v-for="item in cartList" :key="item.id">
          <input type="checkbox" class="checkOne" v-model="item.isChecked" @change="updateProdutChecked({
            prodId: item.id,
            checked: $event.target.checked
          })">
          <div class="img-box"><img :src="item.src" alt=""></div>
          <span class="goods-name">{{ item.General }}{{ item.corlo1 }}</span>
          <span class="good-price">￥<span class="prices">{{ item.price }}</span>元</span>
          <div class="numkes">
            <span class="plus" @click="addNum(item.id)" :plain="true">
              <i class="iconfont icon-jia-copy"></i>
            </span>
            <input type="text" class="num" v-model="item.num">
            <span class="minus" @click="minusNum(item.id)">
              <i class="iconfont icon-jian"></i>
            </span>
          </div>
          <span class="xiaoji">￥<span>{{ item.num * item.price }}</span>元</span>
          <div class="del" @click="delCart(item.id)"><i class="iconfont icon-shanchu"></i></div>
        </div>
      </div>
      <div class="goods" v-else>
        <div class="IsLogin">请添加商品</div>
      </div>
      <div class="money" v-if="cartList.length > 0">
        <div class="goon">
          <span class="gw" @click="getIndex"><a>继续购物</a></span>
          &nbsp; | &nbsp;<span>已经选择<span class="numbers">{{ totalInfo.totalNum }}</span>件</span>
        </div>
        <div class="tot">合计：<span class="totleP">{{ totalInfo.totalPrice }}</span>元</div>
        <div class="jies" @click="getSettlement">
          <span><a>去结算</a></span>
        </div>
      </div>
    </div>
    <div class="box" v-else>
      <div class="IsLogin">请先登录</div>
    </div>
  </div>
</template>
<script>

import { mapMutations, mapGetters } from 'vuex';
export default {
  created() {
    const savedToken = localStorage.getItem('token');
    if (savedToken) {
      this.token = savedToken;
    } else {
      this.token = '';
    }
  },
  data: {
    return() {
      return {
        token: '',
      }
    },
  },
  props: {
    cartList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    ...mapMutations("cart", ["delCartItem", "increaNum", "decreaseNum", "updateAllProdutChecked", "updateProdutChecked"]),
    //删除功能
    delCart(id) {
      this.delCartItem(id)
      this.$message({
        showClose: true,
        message: '删除成功',
        type: 'success'
      });
    },
    // 商品数量加减
    addNum(id) {
      this.increaNum(id)
    },
    minusNum(id) {
      this.decreaseNum(id)
    },
    getSettlement() {
      // 使用计算属性获取 totalPrice
      const totalPrice = this.totalInfo.totalPrice;
      this.$emit('getSettlement', totalPrice);
    },
    // 继续购物
    getIndex() {
      this.$emit('getIndex');
    },
  },
  computed: {
    //计算属性
    ...mapGetters('cart', ["totalInfo"]),
    //全选反选功能 详细写法
    isAllChecked: {
      get() {
        //商品都被选中返回 true反之 false
        return this.cartList.every(item => item.isChecked);
      },
      set(value) {
        //全选
        this.updateAllProdutChecked(value)
      }
    }


  }
};
</script>
<style scoped>
@import url("../../assets/css/font_h4pcd51ro2/iconfont.css");

.IsLogin {
  width: 200px;
  color: #666;
  margin: 0 550px;
  font-size: 25px;
}

body {
  background-color: #F5F5F5;
}

a {
  text-decoration: none;
  color: #757575;
}

.iconfont {
  cursor: pointer
}




.box {
  margin: 20px auto;
  width: 1200px;
  background-color: #FFFFFF;
}

.wapper {
  height: 70px;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
  line-height: 70px;
  color: #424242
}

.title {
  width: 110px;
}

.timg {
  width: 120px;
}

.name {
  width: 350px;
  text-align: center;
}

.nums {
  width: 208px;
  text-align: left;
}

.price {
  width: 105px;
  padding-right: 90px;
  /* text-align: center; */
  /* color: #424242 */
}

.total {
  width: 80px;
  /* padding-right: -13px; */
}

.dels {
  margin-left: 25px;
  width: 79px;
}

.xiaoji {
  width: 150px;
  padding-right: 18px;
  text-align: right;
}

.slgle-goods {
  margin-top: 15px;
  color: #484242;
  cursor: pointer;

}

.slgle-good {
  cursor: pointer;

  border-top: 1px solid #e0e0e0;
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #484242;
}

input {
  accent-color: #ff6700;
}

.checkOne {
  width: 20px;
  margin-left: -13px;
}

.img-box {
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.img-box img {
  width: 100%;
  height: 100%;
}

.num {
  width: 20px;
  border: 0px;
  outline: none;
  vertical-align: middel;
  text-align: center;
}

.goods-name {
  width: 230px;
}

.good-price {
  width: 140px;
  text-align: center;
}

.numkes {
  margin-left: 20px;
  display: flex;
  justify-content: space-around;
  width: 149px;
  height: 30px;
  border: 1px solid #e0e0e0;
  line-height: 30px;
}

.iconfont {
  font-size: 16px;
  color: #757575;
}

.xiaoji {
  color: #FF7833;
}

.del {
  width: 79px;
  text-align: center;
  margin-right: 10px;
}

.money {
  margin: 10px auto;
  width: 1200px;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;

}

.goon {
  cursor: pointer;
  margin-left: 10px;
  line-height: 50px;
  color: #757575;
  font-size: 14px;
}

.tot {
  width: 500px;
  margin-left: 240px;
  text-align: right;
  line-height: 50px;
  color: #ff6700;
}

.totleP {
  font-size: 25px;
}

.jies {
  cursor: pointer;
  width: 210px;
  background-color: #ff6700;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
}

.jies a {
  color: #fff;
}

.numbers {
  color: #ff6700;
}

.goon a:hover {
  color: #ff6700;
}
</style>